<!--
 * @Descripttion: xgplayer二次封装
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年11月29日12:10:06
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月30日21:02:50
-->

<template>
	<div class="sc-video" ref="scVideo"></div>
</template>

<script>
	import Player, {
		Events
	} from 'xgplayer'

	import HlsPlayer from 'xgplayer-hls'
	import FlvPlugin from 'xgplayer-flv'

	import 'xgplayer/dist/index.min.css';

	export default {
		props: {
			src: {
				type: String,
				required: true,
				default: ""
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			controls: {
				type: Boolean,
				default: true
			},
			loop: {
				type: Boolean,
				default: false
			},
			isLive: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				player: null
			}
		},
		watch: {
			src(val) {
				if (this.player.hasStart) {
					this.player.src = val
				} else {
					this.player.start(val)
				}
			}
		},
		mounted() {
			if (this.isLive) {
				if (~this.src.indexOf(".flv")) {
					this.initFlv()
				} else {
					this.initHls()
				}
			} else {
				this.init()
			}
			this.player.on(Events.PLAY, () => {
				console.error("视频播放") // 调用方法
			})
			this.player.on(Events.PAUSE, () => {
				console.error("视频暂停") // 调用方法
			})
		},
		methods: {
			init() {
				this.player = new Player({
					el: this.$refs.scVideo,
					url: this.src,
					autoplay: this.autoplay,
					loop: this.loop,
					controls: this.controls,
					fluid: true,
					lang: 'zh-cn',
					...this.options
				})
			},
			initFlv() {
				/*

				*/
				this.player = new Player({
					el: this.$refs.scVideo,
					url: this.src,
					autoplay: this.autoplay,
					loop: this.loop,
					controls: this.controls,
					fluid: true,
					isLive: true,
					ignores: ['time', 'progress', 'playbackrate'],
					lang: 'zh-cn',
					plugins: [FlvPlugin],
					flv: {
						targetLatency: 3, // 直播目标延迟，默认 5 秒
						maxLatency: 5, // 直播允许的最大延迟，默认 10 秒
						disconnectTime: 0, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
					},
					...this.options
				})
			},
			initHls() {
				this.player = new Player({
					el: this.$refs.scVideo,
					url: this.src,
					autoplay: this.autoplay,
					loop: this.loop,
					controls: this.controls,
					fluid: true,
					isLive: true,
					ignores: ['time', 'progress', 'playbackrate'],
					lang: 'zh-cn',
					plugins: [HlsPlayer],
					...this.options
				})
			}
		}
	}
</script>

<style scoped>
	.sc-video:deep(.danmu)>* {
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
	}

	.sc-video:deep(.xgplayer-controls) {
		background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
	}

	.sc-video:deep(.xgplayer-progress-tip) {
		border: 0;
		color: #fff;
		background: rgba(0, 0, 0, .5);
		line-height: 25px;
		padding: 0 10px;
		border-radius: 25px;
	}

	.sc-video:deep(.xgplayer-enter-spinner) {
		width: 50px;
		height: 50px;
	}

	/*
	预览图片铺满
	*/
	.sc-video:deep(.xgplayer-poster) {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
